﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wap/Shop/ShopSite.Master" AutoEventWireup="true"
    CodeBehind="CommentCenter.aspx.cs" Inherits="ZLCMS.Web.Wap.Shop.CommentCenter" %>
<%@ Register src="Footer.ascx" tagname="Footer" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>评价中心</title>
    <style type="text/css">
        .herder
        {
            background-color: #fff;
            border-bottom: 1px solid #e0e0e0;
            overflow: hidden;
        }
        .herder-left
        {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            z-index: 1;
        }
        .herder-left img
        {
            width: 100%;
            height: 100%;
            padding: 20% 30%;
        }
        .herder-title
        {
            float: left;
            height: 30px;
            text-align: center;
            line-height: 30px;
            padding: 0 30px;
            width: 100%;
        }
        .product-list {
            margin-bottom: 10px;
        }
        .product
        {
            background-color: #fff;
            overflow: hidden;
            margin-top: 10px;
            padding: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
        .product .time
        {
            color: #999;
            margin-bottom: 5px;
            font-size: 12px;
        }
        .product .cover
        {
            width: 80px;
            height: 80px;
            float: left;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border-top: 1px dashed #eee;
            border-bottom: 1px dashed #eee;
        }
        .product .main
        {
            height: 80px;
            overflow: hidden;
            padding: 10px;
            border-top: 1px dashed #eee;
            border-bottom: 1px dashed #eee;
        }
        
        .current-comment-box
        {
            margin-top: 5px; /*border-top: 1px solid #ddd;*/
            color: #666;
            font-size: 12px;
        }
        
        
        .current-append-box, .current-replies-box
        {
            padding-top: 10px;
            margin-top: 15px;
            border-top: 1px solid #e0e0e0;
            position: relative;
        }
        .current-append-box div, .current-replies-box div
        {
            overflow: hidden;
            color: #999;
            position: relative;
            word-break: break-all;
            margin-top: 2px;
            word-wrap: break-word;
            line-height: 16px;
            font-size:12px;
        }
        .current-append-box::before, .current-append-box::after, .current-replies-box::before, .current-replies-box::after
        {
            content: "";
            height: 0;
            width: 0;
            display: block;
            border-width: 10px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent #e0e0e0 transparent;
            position: absolute;
            left: 12px;
            top: -20px;
            font-size: 0px;
            line-height: 0px;
            overflow: hidden;
        }
        .current-append-box::after, .current-replies-box::after
        {
            border-bottom-color: #fff;
            margin-top: 1px;
        }
        .current-append-box span, .current-replies-box span
        {
            float: left;
            color: #f39800;
            font-size: 12px;
        }
        .current-append-box p, .current-replies-box p
        {
            float: right;
            font-size: 12px;
        }
        
        
        .btn
        {
            text-align: right;
            padding-top: 10px;
        }
        .btn button
        {
            width: auto;
            height: 30px;
            display: inline-block;
            line-height: 30px;
            font-size: 13px;
            margin: 0;
            padding: 0 10px;
            background-color: #f9384d;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
        
        
        .comment
        {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            display: none;
            background-color: #f9f9f9;
        }
        .comment-star
        {
            overflow: hidden;
            margin-bottom: 10px;
        }
        .comment-star span, .comment-star i
        {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            float: left;
        }
        .comment-star i
        {
            background: url(images/star.png) no-repeat;
            width: 30px;
        }
        .comment-star i.on
        {
            background-position: 0 -35px;
        }
        .comment-star-info {
            color: #999;
            font-size: 12px;
        }
        .comment-star-img .img
        {
            display: inline-block;
            box-shadow: none;
            width: 85px;
            height: 16px;
            cursor: pointer;
            text-indent: -9999px;
            background: url(images/star_more.png) no-repeat;
            background-size: 80px;
        }
         .comment-star-img span
         {
             font-size:12px;
         }
        .comment-star-img .img.on-2
        {
            background-position: 0 -17px;
        }
        .comment-star-img .img.on-3
        {
            background-position: 0 -33px;
        }
        .comment-star-img .img.on-4
        {
            background-position: 0 -50px;
        }
        .comment-star-img .img.on-5
        {
            background-position: 0 -66px;
        }
        
        
        .comment-textarea textarea
        {
            width: 100%;
            border-radius: 5px;
            font-size: 12px;
            padding: 5px;
            border: 1px solid #ddd;
        }
        .comment-img
        {
            margin-top: 10px;
        }
        .comment-img .comment-info
        {
            color: #999;
        }
        
        .comment-img ul:after
        {
            content: " ";
            height: 0;
            display: block;
            clear: both;
        }
        .comment-img ul li
        {
            margin-top: 10px;
            float: left;
            height: 50px;
            margin-right: 10px;
            border: 1px solid #ddd;
            position: relative;
            background-color: #fff;
        }
        
        .comment-img ul li img
        {
            height: 100%;
            min-width: 50px;
            display: block;
        }
        .comment-img ul li span
        {
            display: block;
            position: absolute;
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background-color: #f55;
            color: #fff;
        }
        
        .comment-img ul li.add
        {
            width: 60px;
            font-size: 30px;
            line-height: 60px;
            text-align: center;
            padding: 6px;
        }
        .comment-img ul li.add img
        {
            width: 40px;
            height: 40px;
        }
        
        .submit
        {
            margin-top: 10px;
        }
        
        .submit button
        {
            display: block;
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            margin: 0;
            border: none;
            padding: 0 5px;
            background-color: #f9384d !important;
            color: #fff !important;
            border-radius: 5px;
        }
        
        .nav
        {
            height: 36px;
            background-color: #fff;
        }
        
        .nav span
        {
            display: block;
            height: 36px;
            line-height: 36px;
            width: 50%;
            float: left;
            border-left: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }
        
        .nav span.active
        {
            color: #f9384d;
            border-bottom-color: #f9384d;
        }
        
        .nav span:nth-child(1)
        {
            border-left: none;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pages" runat="server">
    <div data-role="page" id="mypage">
        <div data-role="header">
            <div class="herder" style="display: none;">
                <a class="herder-left" href="#" onclick="javascript:history.go(-1)">
                    <img src="images/arrowLeftCom.png" alt="">
                </a>
                <div class="herder-title">
                    评价中心</div>
            </div>
            <div class="nav" style="display: none;">
                <span href="">待评价</span> <span href="">已评价</span>
            </div>
        </div>
        <div role="main" class="ui-content">
            <div class="product-list">
            </div>
        </div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <uc1:Footer ID="Footer1" runat="server" MenuId="M" />  
        </div>
    </div>
    <script class="script-template" data-name="product" type="text/template">
        <div class="product">
            <div class="cover" style="background-image: url({ThumbnailImg});">
            </div>
            <div class="main">
                <p class="title">{ProductName}</p>
                <p class="price">单价：<span style="color:red">￥<font prop="Data.SalePrice">{SalePrice}</font></span></p>
            </div>
            <div class="btn"></div>
            <div class="comment-box"></div>
        </div>
    </script>
    <script class="script-template" data-name="product-history" type="text/template">
        <div class="product">
            <div class="time">{RecordDate}</div>
            <div class="cover" style="background-image: url({ProductImg});">
            </div>
            <div class="main">
                <p class="title">{ProductName}</p>
                <div class="comment-star-img"><span>我的评分：</span><span class="img on-{Score}"></span></div>
            </div>
            <div class="current-comment-box">
                <p>{Content}</p>
                <div class="comment-img show">{ImgUrlHtml}</div>
                
            </div>
            <div class="current-append-box" style="display: none;">
                <div class="manager">
                    <div>
                        <span>[追加评论]</span>
                        <p>{AppendTime}</p>
                    </div>
                    <div>{AppendContent}</div>
                    <div class="comment-img show">{AppendImageHtml}</div>
                </div>
            </div>
            <div class="current-replies-box" style="display: none;">
                <div class="manager">
                    <div>
                        <span>[V·商城客服]</span>
                        <p>{RepliesTime}</p>
                    </div>
                    <div>{RepliesContent}</div>
                </div>
            </div>
            <div class="btn"></div>
            <div class="comment-box">
            </div>
        </div>
    </script>
    <script class="script-template" data-name="comment0" type="text/template">
        <div class="comment" data-type="addComment">
            <div class="comment-star" data-value="5">
                <span>评分：</span>
                <i class="on"></i>
                <i class="on"></i>
                <i class="on"></i>
                <i class="on"></i>
                <i class="on"></i>
            </div>
            <p class="comment-star-info" style="display: none;">遇到产品质量问题了吗？<a href="ReturnablesList.aspx?no={OrderNo}">点击这里申请售后</a>，小V会尽快处理喔~</p>
            <div class="comment-textarea"><textarea rows="5" placeholder="这次购买的商品满意吗？写点心得给其他顾客参考吧。长度在6-500字之间"></textarea></div>
            <div class="comment-img">
                <p class="comment-info">添加图片</p>
                <ul>
                    <li class="add">
                        <img src="images/addphoto.png">
                    </li>
                </ul>
                <p class="comment-info">由于微信限制，图片暂时只能支持一张张上传</p>
            </div>
            <div class="submit">
                <button type="button">提交评论</button>
            </div>
        </div>
    </script>
    <script class="script-template" data-name="comment1" type="text/template">
        <div class="comment" data-type="editComments">
            <div class="comment-star" data-value="{Score}">
                <span>评分：</span>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="comment-textarea"><textarea rows="5" placeholder="这次购买的商品满意吗？写点心得给其他顾客参考吧。长度在6-500字之间"></textarea></div>
            <div class="comment-img">
                <p class="comment-info">添加图片</p>
                <ul>
                    <li class="add">
                        <img src="images/addphoto.png">
                    </li>
                </ul>
            </div>
            <div class="submit">
                <button type="button">修改评论</button>
            </div>
        </div>
    </script>
    <script class="script-template" data-name="comment2" type="text/template">
        <div class="comment" data-type="modifyStars">
            <div class="comment-star" data-value="{Score}">
                <span>评分：</span>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="submit">
                <button type="button">提交星评</button>
            </div>
        </div>
    </script>
    <script class="script-template" data-name="comment3" type="text/template">
        <div class="comment" data-type="appendComment">
            <div class="comment-textarea"><textarea rows="5" placeholder="这次购买的商品满意吗？写点心得给其他顾客参考吧。长度在6-500字之间"></textarea></div>
            <div class="comment-img">
                <p class="comment-info">添加图片</p>
                <ul>
                    <li class="add">
                        <img src="images/addphoto.png">
                    </li>
                </ul>
            </div>
            <div class="submit">
                <button type="button">追加评论</button>
            </div>
        </div>
    </script>
    <script src="/wap/lib/common/listviewHandler.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('body').on('click', '.comment-toggle', function (event) {
                event.preventDefault();

                var $comment = $(this).parent().next('.comment-box').children('.comment').eq($(this).index());
                $comment.slideToggle(function () {
                    if ($comment.is(':visible')) {
                        $comment.find('textarea').focus();
                    }
                }).siblings('.comment').slideUp();

            });

            $('body').on('click', '.comment-star i', function (event) {
                event.preventDefault();
                var $el = $(this);
                var $commentStar = $el.parent();
                var value = $el.index();

                $el
                    .addClass('on')
                    .prevAll('i')
                    .addClass('on')
                    .end()
                    .nextAll('i')
                    .removeClass('on');

                $commentStar.data('value', value);
                if (value <= 3) {
                    $commentStar.next('.comment-star-info').show();
                } else {
                    $commentStar.next('.comment-star-info').hide();
                }

            });


            function getLocalImg(localId, callback) {
                var localData = "";
                if (window.__wxjs_is_wkwebview) {
                    wx.getLocalImgData({
                        localId: localId, // 图片的localID
                        success: function (resData) {
                            callback && callback(resData.localData);

                        },
                    });
                } else {
                    callback && callback(localId);
                }
            }


            $('body').on('click', '.comment-img:not(".show") li.add', function (event) {
                event.preventDefault();
                var $this = $(this);
                var $ul = $this.parent();
                var $li = $ul.children('li:not(".add")')
                var $commentImg = $ul.parent();
                if ($li.length >= 5) { return alert('您多上传上传5张图片'); }
                wx.chooseImage({
                    success: function (res) {
                        wx.uploadImage({
                            localId: res.localIds[0],
                            isShowProgressTips: 1,
                            success: function (imgRes) {
                                getLocalImg(res.localIds[0], function (src) {
                                    var serverId = imgRes.serverId;
                                    var $li = $('<li style="display: none;" data-serverid="' + serverId + '"><span>✘</span><img src="' + src + '"></li>');
                                    $this.before($li);
                                    $li.show();
                                    $commentImg.data('imagelist', $ul.children('li:not(".add")').map(function (index, elem) {
                                        return $(elem).data('serverid');
                                    }).get());
                                    alert('上传成功！');
                                });
                            }
                        });
                    }
                });

            });

            $('body').on('click', '.comment-img:not(".show") li:not(".add")', function (event) {
                event.preventDefault();

                var $this = $(this);
                var $ul = $this.parent();
                var $commentImg = $ul.parent();
                $this.hide(function () {
                    $commentImg.data('imagelist', $ul.children('li').map(function (index, elem) {
                        return $(elem).data('serverid');
                    }).get());
                    $this.remove();
                });
            });

        });
    </script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            var $productList = $('.product-list');
            var productTemplate = $('.script-template[data-name="product"]').html();
            var productHhistoryTemplate = $('.script-template[data-name="product-history"]').html();
            var comment0Template = $('.script-template[data-name="comment0"]').html();
            var comment1Template = $('.script-template[data-name="comment1"]').html();
            var comment2Template = $('.script-template[data-name="comment2"]').html();
            var comment3Template = $('.script-template[data-name="comment3"]').html();

            var MemberAccount = '';
            var OrderNo = '<%=Request["ono"] %>';
            var Status = '<%=Request["cs"] %>';
            var No = '<%=Request["no"] %>';

            if (!OrderNo && !No) {
                $('.nav').show();
            } else {
                $('.herder').show();
            }

            $('.nav').children('span').eq(0).click(function (event) {
                OrderNo = '';
                Status = '0';
                No = '';
                load();
            });

            $('.nav').children('span').eq(1).click(function (event) {
                OrderNo = '';
                Status = '1';
                No = '';
                load();
            });

            function load() {
                if (Status === '1') {
                    $('.nav').children('span').eq(1).addClass('active').siblings().removeClass('active');
                    LoadCommentHistory();
                } else {
                    $('.nav').children('span').eq(0).addClass('active').siblings().removeClass('active');
                    LoadCommentList();
                }
            };
            load();


            function LoadCommentList() {
                var handler = $productList.listviewHandler();
                handler.initialize({
                    loaderBtn: $('#btnMore'), //加载数据按钮（点击加载下一页）
                    emptyHtml: '', //无记录时显示此html
                    itemTemplate: productTemplate, //项模板
                    pageIndex: 1, //页码（从1起算）
                    pageSize: 20, //页大小
                    totalCount: 999, //总记录数
                    itemHandler: function (data, itemTemplate, container) { //数据各项处理

                        data.ThumbnailImg = firstFilePath(data.ThumbnailImg);
                        var $product = $(itemTemplate.format(data));
                        var $btnBox = $product.children('.btn');
                        var $commentBox = $product.children('.comment-box');

                        $btnBox.append('<button class="comment-toggle" type="button">填写评论</button> ');
                        var $comment0 = $(comment0Template.format(data));
                        $commentBox.append($comment0);

                        $product.data('data', data);
                        return $product;
                    },
                    afterHandleResult: function (result, totalCount, $this) {
                        if (OrderNo) {
                            $productList.children('.product').find('.btn .comment-toggle').click();
                        }
                    },
                    command: 'Member.LoadCommentabeProducts',
                    parameter: {
                        MemberAccount: MemberAccount,
                        OrderNo: OrderNo,
                        CommentStatus: 0
                    }
                });
                handler.nextPage();
            };

            function LoadCommentHistory() {
                var handler = $productList.listviewHandler();
                handler.initialize({
                    loaderBtn: $('#btnMore'), //加载数据按钮（点击加载下一页）
                    emptyHtml: '', //无记录时显示此html
                    itemTemplate: productHhistoryTemplate, //项模板
                    pageIndex: 1, //页码（从1起算）
                    pageSize: 20, //页大小
                    totalCount: 999, //总记录数
                    itemHandler: function (data, itemTemplate, container) { //数据各项处理
                        data.ProductImg = firstFilePath(data.ProductImg);
                        data.ImgUrlHtml = "";
                        if (data.ImgUrl) {
                            var imgArr = $.parseJSON(data.ImgUrl);
                            var imgHtml = '';
                            $(imgArr).each(function () {
                                imgHtml += '<li><img src="' + ($.cookie('imagesvr') ? $.cookie('imagesvr') : '') + this.FilePath + '"></li>';
                            });
                            data.ImgUrlHtml = '<ul>' + imgHtml + '</ul>';
                        }
                        data.AppendImageHtml = "";
                        if (data.AppendImage) {
                            var imgArr = $.parseJSON(data.AppendImage);
                            var imgHtml = '';
                            $(imgArr).each(function () {
                                imgHtml += '<li><img src="' + ($.cookie('imagesvr') ? $.cookie('imagesvr') : '') + this.FilePath + '"></li>';
                            });
                            data.AppendImageHtml = '<ul>' + imgHtml + '</ul>';
                        }

                        if (data.Replies[0]) {
                            data.RepliesTime = data.Replies[0].ReplyTime;
                            data.RepliesContent = data.Replies[0].ReplyContent;
                        }

                        var $product = $(itemTemplate.format(data));
                        var $btnBox = $product.children('.btn');
                        var $commentBox = $product.children('.comment-box');
                        if (data.Replies[0]) {
                            $product.find('.current-replies-box').show();
                        }
                        if (data.AppendStatus == 1) { // 已追评
                            $product.find('.current-append-box').show();

                            if (data.Score < 5) {
                                $btnBox.append('<button class="comment-toggle" type="button">修改星评</button> ');
                                var $comment2 = $(comment2Template);
                                $commentBox.append($comment2);
                                setTimeout(function () {
                                    $comment2.find('.comment-star').children('i').eq(data.Score - 1).click();
                                }, 0)
                            }


                        } else if (data.TargetType === 0) { // 默认评价了
                            $btnBox.append('<button class="comment-toggle" type="button">修改默认评价</button> ');
                            var $comment1 = $(comment1Template);
                            $commentBox.append($comment1);
                            setTimeout(function () {
                                $comment1.find('.comment-star').children('i').eq(data.Score - 1).click();
                            }, 0)
                        } else {

                            if (data.Score < 5) {
                                $btnBox.append('<button class="comment-toggle" type="button">修改星评</button> ');
                                var $comment2 = $(comment2Template);
                                $commentBox.append($comment2);
                                setTimeout(function () {
                                    $comment2.find('.comment-star').children('i').eq(data.Score - 1).click();
                                }, 0)
                            }

                            $btnBox.append('<button class="comment-toggle" type="button">追加评价</button> ');
                            $commentBox.append(comment3Template);

                        }

                        $product.data('data', data);
                        return $product;
                    },
                    command: 'Member.LoadProductCommentHistory',
                    parameter: {
                        MemberAccount: MemberAccount,
                        TargetSubCode: OrderNo,
                        TargetCode: No
                    }
                });
                handler.nextPage();
            };

            // 评价
            $('body').on('click', '.comment[data-type="addComment"] .submit > button', function (event) {
                event.preventDefault();
                var $this = $(this)
                var $comment = $this.parents('.comment');
                var $product = $comment.parents('.product');
                var data = $product.data('data');

                var params = {
                    "Score": $comment.find('.comment-star').data('value'),
                    "ProductNo": data.ProductNo,
                    "OrderNo": data.OrderNo,
                    "MemberAccount": MemberAccount,
                    "ImageList": ($comment.find('.comment-img').data('imagelist') || []).join(','),
                    "Content": $comment.find('textarea').val()
                };

                if (params.Content.length < 6 || params.Content.length > 500) {
                    return alert('亲，评论长度在6-500字之间哦');
                }

                $product.executeCommand({
                    successCallBack: function () {
                        alert('添加评价成功！');
                        if ($('.product-list .product').length === 1) {
                            return $('.nav').children('span').eq(1).click();
                        }
                        return load();
                    }
                }, 'Member.CommentProduct', params);
            });

            // 星星
            $('body').on('click', '.comment[data-type="modifyStars"] .submit > button', function (event) {
                event.preventDefault();
                var $this = $(this)
                var $comment = $this.parents('.comment');
                var $product = $comment.parents('.product');
                var data = $product.data('data');

                var params = {
                    "Score": $comment.find('.comment-star').data('value'),
                    "CommentId": data.Id,
                    "ImageList": data.ImgUrl
                };

                $product.executeCommand({
                    successCallBack: function () {
                        alert('修改评价成功！');
                        return load();
                    }
                }, 'Member.ChangeCommentScore', params);

            });

            // 修改
            $('body').on('click', '.comment[data-type="editComments"] .submit > button', function (event) {
                event.preventDefault();
                var $this = $(this)
                var $comment = $this.parents('.comment');
                var $product = $comment.parents('.product');
                var data = $product.data('data');


                var params = {
                    "Score": $comment.find('.comment-star').data('value'),
                    "CommentId": data.Id,
                    "ImageList": ($comment.find('.comment-img').data('imagelist') || []).join(','),
                    "AppendContent": $comment.find('textarea').val()
                };

                if (params.AppendContent.length < 6 || params.AppendContent.length > 500) {
                    return alert('亲，评论长度在6-500字之间哦');
                }

                $product.executeCommand({
                    successCallBack: function () {
                        alert('修改默认评论成功！');
                        return load();
                    }
                }, 'Member.ChangeComment', params);

            });

            // 追加
            $('body').on('click', '.comment[data-type="appendComment"] .submit > button', function (event) {
                event.preventDefault();
                var $this = $(this)
                var $comment = $this.parents('.comment');
                var $product = $comment.parents('.product');
                var data = $product.data('data');


                var params = {
                    "Score": data.Score,
                    "CommentId": data.Id,
                    "ImageList": ($comment.find('.comment-img').data('imagelist') || []).join(','),
                    "AppendContent": $comment.find('textarea').val()
                };

                if (params.AppendContent.length < 6 || params.AppendContent.length > 500) {
                    return alert('亲，评论长度在6-500字之间哦');
                }

                $product.executeCommand({
                    successCallBack: function () {
                        alert('追评成功！');
                        return load();
                    }
                }, 'Member.AppendComment', params);

            });
        });
    </script>
</asp:Content>
